<template>
    <search></search>
    <van-tabs v-model:active="active" :click-tab="getView(active)">
        <van-tab v-for="item in listenList" :title="item.title" :key="item.id">
            <template #default>
                <div class="content" v-for="item in listenNavList" :key="item.id" @click="toDetail">
                    <div class="content_left">
                        <img :src="item.coverImgUrl">
                    </div>
                    <div class="content_right">
                        <p class="title">{{ item.title }}</p>
                        <p class="time">
                            <van-icon name="video-o" />
                            <span class="num">{{ item.pageView }}</span>
                            <span>{{ time }} 更新</span>
                        </p>
                    </div>
                </div>
            </template>
        </van-tab>
    </van-tabs>
</template>
<script lang="ts" setup>
import Search from '../search'
import { ref, onMounted } from 'vue';
import { getListenList, getListenListNav } from '@/api/index'
// import type { ListenModel } from '@/api/index'
import moment from 'moment'
const active = ref(2)
// 顶部导航栏的数据容器
const listenList = ref<any[]>([])
// 页面数据容器
const listenNavList = ref<any[]>([])
// 更新时间参数
let time = ref<any>(moment().subtract(10, 'days').calendar())
// 获取导航栏顶部名字标识
const name = ref<any[]>([])
// 请求数据的页码
const Num = ref(1)
// 请求数据的每页条数
const Size = ref(20)
// 请求获取顶部导航数据
const getListen = async () => {
    try {
        let result = await getListenList()
        console.log(result);
        listenList.value = result.data.categories
        name.value = result.data.categories.map((item) => {
            return item.name
        })
    } catch (error) {
        console.error(error);
    }
}
// 跳转路由
const toDetail = () => {

}
// 请求获取侧边栏数据
const pageNum = Num.value
const pageSize = Size.value
const getListenNav = async (tagName: any) => {
    try {
        let result = await getListenListNav(tagName, pageNum, pageSize)
        listenNavList.value = result.data.subjects
    } catch (error) {
        console.error(error);
    }
}
// 刷新页面数据 匹配name参数
const getView = (id: number) => {
    let result = name.value.filter((item, index) => {
        return index == id
    })
    getListenNav(result[0])
}
// 页面挂载请求数据
onMounted(() => {
    getListen()
    let defaultName = 'remen'
    getListenNav(defaultName)
})
</script>
<style lang="less">
.van-tabs__line {
    background: #f06742 !important;
}

.van-tab--active {
    font-size: 18px !important;
    color: #40404c !important;
}

.content {
    width: 96%;
    margin-left: 4%;
    height: 100px;
    padding-top: 15px;
    display: flex;
    flex-wrap: nowrap;

    .content_left {
        img {
            width: 70px;
            height: 70px;
        }
    }

    .content_right {
        margin-left: 10px;
        height: 70px;

        .title {
            font-size: 16px;
            color: #40404c;
            height: 44px;
            width: 277px;
        }

        .time {
            margin-top: 10px;
            height: 17px;
            font-size: 12px;
            color: #a3a3ac;

            .num {
                margin: 0px 14px 0px 4.5px;
            }
        }
    }
}
</style>